/*--------- Colores -----------------*/

@negro: #000;
@blanco: #fff;

@rojo:#CA000F;
@gris:#545649;


/*----degradados----*/
/*-rojo-*/
@rojo:#CA000F;
@rojo1:#8f0222;
@rojo2:#6d0019;

/*-amarillo-*/
@amarillo:#E9BA2C;
@amarillo1:#c7a02a;
@amarillo2:#C69E26;

@altura-header: 50px;

.degradado(@colorinicial,@colormedio,@colorfinal){
	background: @colorinicial;
	background: -moz-linear-gradient(top, @colorinicial 0%, @colormedio 89%, @colorfinal 100%);
	background: -webkit-gradient(left top, left bottom, color-stop(0%, #a90329), color-stop(89%, @colormedio), color-stop(100%, @colorfinal));
	background: -webkit-linear-gradient(top, @colorinicial 0%, @colormedio 89%, @colorfinal 100%);
	background: -o-linear-gradient(top, @colorinicial 0%, @colormedio 89%, @colorfinal 100%);
	background: -ms-linear-gradient(top, @colorinicial 0%, @colormedio 89%, @colorfinal 100%);
	background: linear-gradient(to bottom, @colorinicial 0%, @colormedio 89%, @colorfinal 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=@colorinicial, endColorstr=@colorfinal, GradientType=0 );
}

@font-face{
	src:url('../../../fonts/SourceSansPro-Light.ttf');
	font-family: SourceSansLight;
}

@font-face{
	src:url('../../../fonts/SourceSansPro-Regular.ttf');
	font-family: SourceSansRegular;
}


header{
	color: @blanco;
	font-family: SourceSansRegular;
	height: @altura-header;
	opacity: 0.9;			
	.user{		
		background-color: @amarillo;
		//.degradado(@rojo,@rojo1,@rojo2);
		height: @altura-header;
		.user-name{
			line-height: @altura-header;
		}

		img{
			height: (@altura-header - 5px);
			width: auto;
		}
		span{
			color:black;
			font-family: SourceSansRegular;
			font-size: 1.2em;
			//font-weight: bold;
			line-height: @altura-header;
		}
	}

	.datetime{
		background-color: @blanco;
		border-bottom: 3px solid;
		border-bottom-color: @rojo1;
		color: @negro;
		height: (@altura-header);
		.date, .time{
			font-size: 1.2em;						
			line-height: @altura-header;
			text-align: right;
			//text-shadow: 0 0 3px rgba(255,255,255,0.4);
			word-spacing: 0.1em;
		}	
		.icon-time, .icon-calendar{
			//font-size: 1.5em;
			line-height: @altura-header;
			padding-right: 10px;
		}	
	}
	.userdata-area{
		background-color: @rojo1;	
		//.degradado(@amarillo,@amarillo1,@amarillo2);
		height: 100%;
		line-height: @altura-header;
		//min-width: 50px;
		img{
			//padding: 0.2em;
			width: 45px;
			height: 40px;
		}	
	}
}


//----- nav ------///
.sidebar {
	background: @negro;
  	display: block;
  	float: left;  	
  	font-family: SourceSansRegular;
  	font-size: 15px;
  	margin: 0;
  	opacity: 0.9;
  	padding: 0;
	
	.sidebar-nav {
		//border-bottom: 1px solid rgba(0, 0, 0, 0.3);
		filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ff333333', endColorstr='#ff222222', GradientType=1);

		ul{
			padding: 0;
  			margin: 0;
  			list-style: none;
  			li, a{
  				display: block;
  			}
  			a{
  				//border-bottom: 1px solid rgba(0, 0, 0, 0.5);
  				box-shadow: 0px 1px 0px rgba(255, 255, 255, 0.08) inset;
  				color: @blanco;
  				height: 50px;
  				padding: 1em 0.3em;
  				-webkit-transition:1s; 					
  				-moz-transition:1s;	
				-ms-transition:1s;
				-o-transition:1s;
				transition:1s;
  				  				
  				&:hover, &:focus, &:active{
  					background-color: #333;
  					text-decoration: none; 
  					-webkit-transition:1s; 					
  					-moz-transition:1s;	
					-ms-transition:1s;
					-o-transition:1s;
					transition:1s;
  				}
  				i{
  					font-size: 1.4em;
  				}
  			}
  			ul{
  				a{
  					padding: 1em 1.5em;
					background-color: rgba(255, 255, 255, 0.1);

					&:hover, &:focus, &:active{
						background-color: rgba(255, 255, 255, 0.2);
					}
  				}
  			}	 

  			.arrow {
			    float: right;
			}

			.glyphicon.arrow:before {
			    content: "\e114";
			}

			.active > a > .glyphicon.arrow:before {
			    content: "\e113";
			}

			.fa.arrow:before {
			    content: "\f104";
			}

			.active > a > .fa.arrow:before {
			    content: "\f107";
			}

			.plus-times {
			    float: right;
			}

			.fa.plus-times:before {
			    content: "\f067";
			}

			.active > a > .fa.plus-times {
			    filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
			    -webkit-transform: rotate(45deg);
			    -moz-transform: rotate(45deg);
			    -ms-transform: rotate(45deg);
			    -o-transform: rotate(45deg);
			    transform: rotate(45deg);
			}

			.plus-minus {
			    float: right;
			}

			.fa.plus-minus:before {
			    content: "\f067";
			}

			.active > a > .fa.plus-minus:before {
			    content: "\f068";
			}  	
		}
	}
}

.sidebar-nav-item {
	padding-left: 5px;
}
.sidebar-nav-item-icon {
	padding-right: 5px;
}


section{	
	font-family: SourceSansRegular;	
	overflow-y: auto;	
	article{
		background-color: @blanco;
		border-radius: 3px;	
		padding: 1em;

		.export{
			background-color: #ddd;
			border-radius: 5px;
			height: 40px;
			margin-bottom: 10px;
			width: 100%;
			ul{
				margin: 0;
				padding: 0;
				li{
					display: inline;
					float: right;
					list-style: none;
					a {
						color:@negro;
						display: block;
						padding: 5px 1em;
						text-decoration: none;
						.docs-icon{
							font-size: 20px;
							line-height: 30px;
						}
					}
				}
			}
		}

		.title{
			font-family: SourceSansRegular;
			font-size: 18px;
			height: 40px;
			line-height: 40px;
		}
		thead{
			background-color: @amarillo;
		}
	}	
}
